<template>
  <div class="param-main">
       <el-form
        :model="createForm"
        label-width="160px"
        label-suffix=":"
        class="searchw"
        ref="createForm"
      >
        <el-row :gutter="24">
          <el-col :span="22">
            <el-form-item label="图片" prop="imgName" class="pictu">
               <el-upload class="upload-demo" ref="upload" action list-type="picture" :file-list="fileList"
                  :on-change="fileChange" :disabled="!isupload " accept="png,jpg"
                  :before-remove="beforeRemove">
                  <img v-if="createForm.imgName" :src="createForm.imgName" class="avatar">
                  <i v-else class="el-icon-plus avatar-uploader-icon"></i>
                </el-upload>
            </el-form-item>
          </el-col>
        </el-row>
    </el-form>
  </div>
</template>
<script>
import XEUtils from 'xe-utils'
import {
  delSysRegion,
  getSysRegionList,
  getJshSupplierJXSList
} from '@/api/carLine'
export default {
  name: 'applyMain',
  data() {
    return {
      loading: false,
      listData: [],
      regionalList: [],
      supplierList: [],
      selection: [],
      serachForm: {
        code: '',
        type: 'province'
      },
      pageInfo: {
        page: 1,
        size: 100,
        total: 0
      },
      brands: [],
      typeList: ['province', 'city', 'area', 'street'],
      typeDataList: [
        {
          code: 'province',
          value: '省级'
        },
        {
          code: 'city',
          value: '城市'
        },
        {
          code: 'area',
          value: '区县'
        },
        {
          code: 'street',
          value: '乡镇/街道'
        }
      ],
      saveType: 'update'
    }
  },
  created() {},
  mounted() {
    this.getRegionalList()
    this.getSupplierList()
  },
  methods: {
     /**
     * 设置初始化值
     */
    initTableData(val){
      val.map(item=>{
        item.cityId = item.cityId && item.cityId.toString()
        item.supplierId = item.supplierId && item.supplierId.toString()
      })
      this.listData = val;
    },
    /**
     * 获取当前表格的数据
     */
    getTableData(){
      let list = this.listData
      const $table = this.$refs.xTable
      const { insertRecords ,removeRecords} = $table.getRecordset()
      if(insertRecords.length > 0){
        let arr = insertRecords
        arr.map((item) => {
          let op = {
            cityId: item.cityId,
            supplierId: item.supplierId,
            purchasePrice: item.purchasePrice,
            retailPrice: item.retailPrice
          }
          list.push(op)
        })
      }
      if(removeRecords.length > 0){
        let arr = removeRecords.map(item=>{
          return item.id
        });
        arr.map((item) => {
          list.forEach((el,index)=>{
            if(item == el.id){
              list.splice(index,1)
            }
          })
        })
      }
      return list;
    },
    /**
     * 获取码值
     */
    formatterFiled(cellValue,key,val,list) {
      let item = list.find((item) => item[key] === cellValue)
      return item ? item[val] : ''
    },
    /**
     * 插入数据
     */
    async insertEvent() {
      const $table = this.$refs.xTable
      const newRecord = {}
      const { row: newRow } = await $table.insert(newRecord)
      await $table.setActiveRow(newRow)
    },
    async removeRowEvent (row) {
      const $table = this.$refs.xTable
      await $table.remove(row)
    },
    /**
     * 获取经销商数据
     */
    getSupplierList() {
      let param = {
        page: 1,
        size: 1000
      }
      getJshSupplierJXSList(param)
        .then((res) => {
          const { code = undefined, data = {} } = res.data
          if (!code) {
            this.supplierList = data.content
          }
        })
        .catch(() => {
          this.$message.error('服务器繁忙')
        })
    },
    /**
     * 获取区域数据
     */
    getRegionalList() {
      let param = {
        page: 1,
        size: 100,
        type: 'province'
      }
      getSysRegionList(param)
        .then((res) => {
          const { code = undefined, data = {} } = res.data
          if (!code) {
            this.regionalList = data.content
          }
        })
        .catch(() => {
          this.$message.error('服务器繁忙')
        })
    }
  }
}
</script>
